import React ,{ useState, useEffect, useRef } from 'react'
import { Steps , Select} from 'antd'
import '../comm.css'
import GmApproval from '@/pages/QuotaManage/GmApproval';
import { http } from '@/lib';
import apis from '@/apis/AboutQuota';


const { Option } = Select;
const { Step } = Steps;
const deleteimg = require('@/assets/delete.png')
const brandCode = JSON.parse(sessionStorage.getItem('UaaSysInfo'))?.profile?.brandCode[0]
const brandListes = JSON.parse(sessionStorage.getItem('UaaSysInfo'))?.profile?.brandList
const brandName = JSON.parse(sessionStorage.getItem('UaaSysInfo'))?.profile?.brandName[0]

const  MyModel = (props) =>{
    const [template, setTemplate] = useState([])
    const [person, setPerson] = useState([])
    const [selectcode, setSelectcode] = useState([])
    const [currentSelectPerson, setCurrentSelectPerson] = useState(-1)

    const childRef:any = useRef();
    useEffect(() => {
      hangetorg()
    }, [props.rows])
    useEffect(() => {
      let selectcode = brandListes.filter(item=>item.brandCode==props.code)
       setSelectcode(selectcode)
    }, [props.code])
    
     const hangetorg = () =>{
       http.get(apis.orgtemplate,{params:{brandCode}}).then(resp=>{
          setTemplate(resp.data)
          let temp = JSON.stringify(resp.data)
          sessionStorage.setItem('role',temp)
          sessionStorage.setItem('template',temp)

       })
    }

    const  handelshowGM = (index) =>{ //审核model
      // childRef.current
         childRef.current.handelCeck(index)
         setCurrentSelectPerson(index)
    }
    const handelgetperson = (value) =>{
      // console.log(value);

      if(currentSelectPerson == -1) return

      let data = [...person]
      data[currentSelectPerson] = value
      // console.log(person)
      sessionStorage.setItem('person', JSON.stringify(data))
      setPerson(data)
   }
   const handelDelite = (index) =>{
    
    let data = [...person]
      data.splice(index, 1)
      sessionStorage.setItem('person', JSON.stringify(person))
      setPerson(data)
      setCurrentSelectPerson(index)
 }
  return(
    <div>
           <div className="sp-person">
               选择审批人：
                      {/* ======== */}
           <div className="Step_model">
            <Steps progressDot current={0} direction="vertical">
                {
                  template.map((item,index)=>(
                    <Step key={index} title={item.name} />
                  ))
                }
            </Steps>
            <div>
                {
                  template.map((item,index)=>(
                    <div className="waper-check" key={index}>
                      {((!person[index] || !person[index].length ) )?
                        <div className="crli_model"  onClick={()=>handelshowGM(index)}>+</div>:
                        (person.length!=0&&person[index])?person[index].map(resp=>(
                          <div className="crli_tname" key={resp.id}>
                            <img src={deleteimg}  className="deleteimg" onClick={()=>handelDelite(index)} />
                            {resp.realName}
                          </div>
                        )):
                        item.userNames?.map((res,idx)=>(
                        <div className="crli_tname" key={idx}>{res}</div>   
                        ))
                      }
                    </div>
                  ))
                }
                <GmApproval cRef={childRef} handelcilck={handelgetperson}/>
            </div>
          </div>
           </div> 
    </div>
  )
}
const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

function handleChange(value) {
  console.log(`selected ${value}`);
}

export default MyModel
